<template>
<el-container class="le-login">
  <el-row class="le-login-main" :gutter="20">
    <el-col :span="12" :offset="6">
      <el-form status-icon ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名">
          <el-input type="password" v-model="userName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="pwd" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">提交</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</el-container>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { login, getAllPermissions } from '@/api'

@Component({
  components: {
  }
  })

export default class Login extends Vue {
  private userName: string = 'dive'
  private pwd: string = 'xiaoyang'

  private async mounted () {
    const {res, err} = await getAllPermissions()
    console.log(res, err)
  }
  /**
   * @method
   * @desc 用户登录
   * @version 1.0
   * @date 2018-09-12
   * @author Leo Yang
   */
  private async login () {
    const { res, err }: any = await login({userName: this.userName, pwd: this.pwd})
    if (err !== null) {
      // 错误处理
      console.error(err)
      this.$message({
        type: 'error',
        message: err.msg
      })
      return
    }
    // 正确处理
    this.$message({
      type: 'success',
      message: '这是一条消息提示'
    })
  }
}
</script>

<style lang="less" scoped>
.le-login {
  position: absolute;
  width: 100%;
  .le-login-main {
    margin-top: 200px;
    width: 100%;
  }
}
</style>
